<nav class="clearfix responsive-nav" role="navigation" id="js-responsive-nav">
  <a class="nav-logo logo-oss btn bg-transparent">
    <span class="sr-only">{{settings.appName}}</span>
  </a>

  <ul class="nav-main nav-list no-inline-space">
    {{page-header-project pageScope=pageScope}}

    {{#each navTree as |item|}}
      {{#if item.submenu.length}}
        {{! Has a submenu }}
        {{#hover-dropdown
           tagName="li"
           class="nav-item"
           as |dd|
        }}
          {{#dd.trigger}}
            {{#if (or (not item.resource) (rbac-allows resource=item.resource scope=item.resourceScope))}}
              {{#if item.route}}
                {{#link-to-as-attrs
                   ourRoute=item.route
                   ctx=item.ctx
                   qp=item.qp
                   currentWhen=item.currentWhen
                   activeParent="LI"
                   role="button"
                   aria-haspopup="true"
                   aria-expanded="false"
                }}
                  {{maybe-t item.localizedLabel item.label}}
                  <span class="icon icon-chevron-down"/>
                {{/link-to-as-attrs}}
              {{else}}
                <a role="button" aria-haspopup="true" aria-label={{maybe-t item.localizedLabel item.label}}>
                  {{maybe-t item.localizedLabel item.label}}
                  <span class="icon icon-chevron-down"/>
                </a>
              {{/if}}
            {{/if}}
          {{/dd.trigger}}

          {{#dd.content
             tagName="ul"
          }}
            {{#each item.submenu as |subitem|}}
              {{#if subitem.route}}
                {{#if (or (not subitem.resource) (rbac-allows resource=subitem.resource scope=subitem.resourceScope))}}
                  <li>
                    {{#link-to-as-attrs
                       ourRoute=subitem.route
                       ctx=subitem.ctx
                       qp=subitem.qp
                       activeParent="LI"
                    }}
                      <span>
                        {{maybe-t subitem.localizedLabel subitem.label}}
                      </span>
                      <i class="{{subitem.icon}}"/>
                    {{/link-to-as-attrs}}
                  </li>
                {{/if}}
              {{else if subitem.divider}}
                <li class="divider"></li>
              {{else}}
                {{! Just a label }}
                <li class="dropdown-header">
                  <span>
                    {{maybe-t subitem.localizedLabel subitem.label}}
                  </span>
                  <i class="{{subitem.icon}}"/>
                </li>
              {{/if}}
            {{/each}}
          {{/dd.content}}
        {{/hover-dropdown}}

      {{else if item.route}}

        {{#if (or (not item.resource) (rbac-allows resource=item.resource scope=item.resourceScope))}}
          {{! No submenu }}
          <li class="nav-item">
            {{#link-to-as-attrs
               ourRoute=item.route
               ctx=item.ctx
               qp=item.qp
               activeParent="LI"
               currentWhen=item.currentWhen
               class="nav-link"
            }}
              {{maybe-t item.localizedLabel item.label}}
            {{/link-to-as-attrs}}
          </li>
        {{/if}}

      {{else}}

        {{! Just a label }}
        <li class="dropdown-header">
          {{maybe-t item.localizedLabel item.label}}
        </li>

      {{/if}}
    {{/each}}
  </ul>

  {{#hover-dropdown
     tagName="ul"
     class="nav-user"
     horizontalPosition="right"
     delay=250
     as |dd|
  }}
    {{!-- <ul class="nav-user"> --}}
    {{#dd.trigger
       class="btn"
       ariaLabel=(t "nav.user.label" username=session.user)
    }}
      {{#if accessEnabled}}
        {{identity-avatar
          link=false
          identity=access.principal
        }}
      {{else}}
        <div class="gh-avatar">
          <div class="gh-placeholder">
            <i class="icon icon-user"></i>
          </div>
        </div>
      {{/if}}
      <span class="sr-only">
        {{t "nav.srToggleDropdown"}}
      </span>
      <i class="icon icon-chevron-down text-muted"></i>
    {{/dd.trigger}}

    {{#dd.content
       class="text-right"
       tagName="ul"
    }}
      {{#if accessEnabled}}
        <li role="presentation" class="user-auth">
          {{identity-block principal=access.principal}}
        </li>
      {{/if}}

      <li role="separator" class="divider"></li>
      <li>
        {{#link-to "authenticated.apikeys"}}
          <span>{{t "nav.api.link"}}</span>
          <i class="icon icon-key icon-fw"/>{{/link-to}}
      </li>
      <li>
        {{#link-to "global-admin.security.cloud-credentials"}}
          <span>{{t "nav.admin.security.cloudCredentials"}}</span>
          <i class="icon icon-secrets icon-fw"/>
        {{/link-to}}
      </li>
      <li>
        {{#link-to "nodes.node-templates"}}
          <span>{{t "nav.nodeTemplates.link"}}</span>
          <i class="icon icon-host icon-fw"/>
        {{/link-to}}
      </li>
      <li role="separator" class="divider"></li>
      <li>
        {{#link-to "authenticated.prefs"}}
          <span>{{t "nav.userPreferences.link"}}</span>
          <i class="icon icon-gear icon-fw"/>
        {{/link-to}}
      </li>
      <li role="separator" class="divider"></li>
      <li>
        {{#link-to "logout" class="user-logout"}}
          <span>{{t "nav.user.logout"}}</span>
          <i class="icon icon-logout icon-fw"/>
        {{/link-to}}
      </li>
    {{/dd.content}}
    {{!-- </ul> --}}
  {{/hover-dropdown}}
</nav>
